<template>
<div>
    <div class="Psearch">
        <img class="Plogo" src="../assets/imgs/logo.png" alt="logo" @click="home">
        <div class="Psearch11">
            <div class="Psearch12">
                <input class="Psearch1" type="text" value="请输入关键字进行搜索" @click="tosearch($event)">
                <div class="Psearch2">
                    <i class="Psearch4"></i>
                </div>
            </div>
            <ul class="Psearch3">
                <li class="Psearch5">热门：</li>
                <li class="Psearch6" v-for="(item,index) in hot" :key="index">{{item}}</li>
            </ul>
        </div>
        <div class="Psearch7">
            <button class="Psearch8 Pleft" @click="personal">
                <i class="Psearch9"></i>
                个人中心
            </button>
            <button class="Psearch8"  @click="shop">
                <i class="Psearch9 Psearch10"></i>
                购物车
                <i class="Pmsg">{{num}}</i>
            </button>
        </div>
    </div>
    <div class="topnav2">
        <ul class="topnav">
        <li v-for="(item,index) in nav" :key="index">
            <p class="topnav1" v-if="index==0">
                {{item}}
                <i class="topnav4"></i>
            </p>
            <p class="topnav3" v-if="index>0">
                {{item}}
            </p>
        </li>
    </ul>
    </div>
</div>
</template>

<script>

export default {
    name:'Topsearch',
    data(){
        return{
            hot:['奇异果','牛排','山竹','牛油果'],
            num:this.$store.state.num,
            nav:['全部分类','首页','同城','礼拜五','积分商城','导航+'],
            menu:[{name:"新鲜水果",src:require("../assets/imgs/c-生猛海鲜.png")},
                 {name:"生猛海鲜",src:require("../assets/imgs/c-生猛海鲜.png")},
                 {name:"肉类家禽",src:require("../assets/imgs/c-肉类家禽.png")},
                 {name:"蛋奶速食",src:require("../assets/imgs/c-生猛海鲜.png")},
                 {name:"田园蔬菜",src:require("../assets/imgs/c-田园蔬菜.png")},
                 {name:"零食酒水",src:require("../assets/imgs/c-零食酒水.png")},
                 {name:"粮油杂货",src:require("../assets/imgs/c-粮油杂货.png")},
                 {name:"礼品卡券",src:require("../assets/imgs/c-礼品卡券.png")},
                 {name:"家具用品",src:require("../assets/imgs/c-生猛海鲜.png")},
            ]
        }
},
methods:{
        click(c){
        for(var i=0;i<this.nav.length;i++){
            this.nav[i] = false;
        }
         this.$set(this.nav,c,true);
        console.log(c);
        if(c==0){
           this.$router.replace('/class');
        }else if(c==1){
          this.$router.replace('/category');
        }
        this.$set(this.nav,c,true);
         },
         facia:function(){
           this.$router.replace('/facialcare')
         }
    },
    methods:{
        tosearch(e){
            e.target.value = '';
        },
        personal:function(){
           this.$router.replace('/ypersonal')
         },
         shop:function(){
           this.$router.replace('/shop')
         },
         home:function(){
           this.$router.replace('/')
         }
}
}
</script>

<style scoped>
/* 搜索 */
.Psearch {
    display: flex;
    padding: 25px 0 55px 0;
    width: 1270px;
    margin: 0 auto;
    position: relative;
    justify-content: space-between;
    align-items: center;
}
.Plogo {
    margin-top: -20px;
}
/* 搜索框 */
.Psearch1 {
    height: 36px;
    width: 446px;
    border: 2px solid #4b943d;
    font-size: 14px;
    padding-left: 10px;
    line-height: 36px;
    color: #999999;
}
.Psearch2 {
    width: 40px;
    height: 40px;
    background: #4b943d;
    position: relative;
}
.Psearch4 {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 10px;
    left: 10px;
    background: url(../assets/imgs/search.png); 
}
/* 热门 */
.Psearch3 {
    display: flex;
    font-size: 14px;
    color: #989898;
}
.Psearch5 {
    margin-right: 15px;
    margin-top: 5px;
}
.Psearch6 {
    margin-right: 27px;
    margin-top: 5px;
}
/* 按钮 */
.Psearch7 {
    display: flex;
    padding-top: 10px;
}
.Psearch8 {
    height: 38px;
    width: 97px;
    padding-left: 26px;
    border: 1px solid #e5e5e5;
    background: #f8f8f6;
    position: relative;
}
.Psearch9 {
    position: absolute;
    height: 16px;
    width: 16px;
    left: 10px;
    background: url(../assets/imgs/pub-shop.png);
    margin-top: 1px;
}
.Psearch10 {
    width: 20px;
    background: url(../assets/imgs/pub-shop.png) -25px 0;
}
.Psearch11 {
    padding-top: 24px;
    margin-right: 40px;
}
.Psearch12 {
    display: flex;
}
.Pleft {
    margin-right: 20px;
}
.Pmsg {
    position: absolute;
    height: 22px;
    width: 22px;
    background: url(../assets/imgs/pub-shop.png) -50px 0;
    left: 27px;
    top: -12px;
    line-height: 22px;
    color: #fff;
}
/* 导航栏 */
.topnav2 {
    width: 100%;
    border-bottom: 1px solid #e4e4e4;
}
.topnav {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    color: #333333;
}
.topnav1 {
    padding: 0 64px 17px 40px;
    font-size: 16px;
    position: relative;
}
.topnav3 {
    padding: 0 60px;
    border-left: 1px solid #e8e8e8;
    font-size: 16px;
}
.topnav4 {
    position: absolute;
    display: inline-block;
    height: 10px;
    width: 10px;
    border: 1px solid #494949;
    transform: rotate(45deg);
    border-left-color: transparent;
    border-top-color: transparent;
    margin-left: 10px;
    margin-top: 2px;
}
</style>